<template>
  <div style="width: 100%;padding: 10px">
    <el-card class="box-card">
      <div>
        <div style="display: flex;align-items: center;justify-content: space-between">
          <div class="details_Header">
            <div class="deleted_Line"></div>
            <span class="details_HeaderTitle">单据信息</span>
          </div>
          <div style="display: flex">
            <el-button type="primary" @click="transferClick" v-if="details.status==0 || details.status==3">付款</el-button>
            <el-button type="primary"  @click="transferQuery" v-if="details.status==1">对账</el-button>
          </div>
        </div>
        <div class="deleted_OrderHeader">
          <el-row :gutter="24">
            <el-col :span="8">
              <span class="deleted_Row_Headings">收款单号：</span>
              <span class="deleted_OrderTitle">{{details.sn}}</span>
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">创建日期：</span>
              <span class="deleted_OrderTitle">{{details.createDate | dateFormatter}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">订单摘要：</span>
              <span class="deleted_OrderTitle">{{details.memo}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">支付类型：</span>
              <span class="deleted_OrderTitle">{{details.paymentPluginName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8" style="overflow: hidden">
              <span class="deleted_Row_Headings">收款人名字：</span>
              <span class="deleted_OrderTitle deleted_OrderTitle_span">{{details.name}}</span>
            </el-col>
            <el-col :span="8">
              <span class="deleted_Row_Headings">收款人电话：</span>
              <span class="deleted_OrderTitle deleted_OrderTitle_span">{{details.mobile}}</span>
            </el-col>
          </el-row>
        </div>
        <div class="details_PayHeader">
          <div class="deleted_Line"></div>
          <span class="details_HeaderTitle">付款信息</span>
        </div>
        <div>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款时间：</span>
              <span class="deleted_OrderTitle">{{details.paymentDate|datetimeFormatter}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款状态：</span>
              <span class="deleted_OrderTitle" style="color: rgb(64, 158, 255)">{{details.status|watchStatus}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款方式：</span>
              <span class="deleted_OrderTitle">{{details.paymentPluginName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款凭证：</span>
              <span class="deleted_OrderTitle">{{details.tranSn}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">付款金额：</span>
              <span class="deleted_OrderTitle">{{details.amount}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="deleted_OrderContent">
            <el-col :span="8">
              <span class="deleted_Row_Headings">退款金额：</span>
              <span class="deleted_OrderTitle">{{details.refund}}</span>
            </el-col>
          </el-row>
        </div>
        <el-dialog
          title="付款方式"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div style="display: flex;flex-direction: column">
            <el-select style="width: 100%" v-model="paymentMethod" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-if="paymentMethod == 2" style="margin-top: 20px" v-model="tranSn"></el-input>
          </div>

          <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="paymentClick">确 定</el-button>
  </span>
        </el-dialog>
      </div>
    </el-card>

  </div>
</template>

<script>
  import {EventBus} from "@/api/eventBus";
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
  import {find, query, submit} from '../../api/transfer'

  export default {
    directives: {elDragDialog, permission},
    name: 'transfer-details',
    data() {
      return {
        details: '',
        detailList: [],
        dialogVisible: false,
        options: [{
          value: '1',
          label: '自动付款'
        }, {
          value: '2',
          label: '人工付款'
        }],
        paymentMethod: '',
        tranSn:''
      }
    },
    created() {
      this.findPayment()
    },
    filters: {
      watchMethod(val) {
        if (val == 0) {
          return '线上支付'
        } else if (val == 1) {
          return '线下支付'
        }
      },
      watchType(val) {
        if (val === 0) {
          return '付款'
        } else if (val === 1) {
          return '充值'
        } else if (val === 2) {
          return '收款'
        }
      },
      watchStatus(val){
        if (val == 0){
          return '等待付款'
        } else if (val == 1){
          return '确认付款'
        }else if (val == 2){
          return '付款完成'
        } else if (val == 3){
          return '付款失败'
        }else if (val == 4){
          return '取消付款'
        }
      },
    },
    methods: {
      findPayment() {
        find(this.$route.query.id).then(response => {
          this.details = response.data;
          this.detailList = response.data.itemList
        })
      },
      transferClick() {
        this.dialogVisible = true
      },
      handleClose(done) {
        this.dialogVisible = false
      },
      paymentClick(){
        if (this.paymentMethod == '2'){
          if (this.tranSn == ''){
            this.$message('请输入付款凭证')
            return
          }
        }
        let params = new URLSearchParams()
        params.append('id',this.details.id);
        params.append('paymentPluginId',this.paymentMethod);
        params.append('tranSn',this.tranSn);
        submit(params).then(res => {
          if (res.type = 'success') {
            console.log(res)
            this.$message('付款成功');
            this.findPayment()
            this.dialogVisible = false
          }
        })
      },
      transferQuery() {
        let params = new URLSearchParams();
        params.append('id', this.details.id);
        query(params).then(response => {
          if (response.type = 'success') {
            this.$message('校验成功');
            this.findPayment()
          }
        })
      },
    },


  }
</script>

<style scoped>
  .box-card {
    width: 100%;
    box-sizing: border-box;
  }

  /deep/ .el-dialog__header {
    border: 1px solid #eeeeee !important;
    padding: 15px !important;
  }

  .popup_content {
    padding-bottom: 0px !important;
  }

  .details_Header {
    display: flex;
    align-items: center;
  }

  .deleted_Line {
    width: 2px;
    height: 12px;
    background-color: #409EFF;
  }

  .details_HeaderTitle {
    font-size: 16px;
    font-weight: 600;
    margin-left: 5px;
    display: block;
    width: 150px;
  }

  .deleted_OrderHeader {
    padding-top: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f2f2f2;
  }

  deleted_OrderTitle_span {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
  }

  .deleted_OrderTitle {
    font-size: 14px;
  }

  .updateButton {
    border-radius: 5px;
    height: 35.6px;
    width: 98px;
  }

  .deleted_OrderContent {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .details_PayHeader {
    display: flex;
    align-items: center;
    margin-top: 40px;
  }

  .details_Buyers {
    display: flex;
    align-items: center;
  }

  .deleted_logo {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .table_Header {
    width: 100%;
    background-color: #f5f7fa;
    padding: 10px;
  }

  .table_HeaderTitle {
    font-size: 12px;
    color: #353535;
    font-weight: 600;
  }

  .align_items {
    display: flex;
    align-items: center;
  }

  .justify_left {
    display: flex;
    align-items: center;
  }

  .justify_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .table_ContentTitle {
    font-size: 12px;
    color: #353535;
  }

  .shop_Height {
    min-height: 30px;
  }

  .deleted_Row_Headings {
    font-size: 14px;
    color: #666666;
    width: 85px;
  }

  .deleted_OrderName {
    font-size: 14px;
    color: #409EFF;
    margin-left: 5px;
    width: 250px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /deep/ .el-dialog__footer {
    padding-top: 0px;
  }
</style>
